<template>
  <div class="home">
    <!-- 预留生成eachrt图标的dom元素 -->
    <div class="zhu">
      <div ref="mycharts1"
           style="width:400px;height:400px;background:skyblue;">
      </div>
    </div>
    <div class="pie">
      <div ref="mycharts2"
           style="width:400px;height:400px;background:skyblue;">

      </div>
    </div>
  </div>
</template>

<script>

import { getAdminApi } from '../api/admin'
import { getStudentApi } from '../api/student'
export default {
  name: "Home",
  data () {
    return {
      mychart1: "",
      pieChart: "",
      // zarr: [],//柱状图y轴数据
    }
  },
  created () {
    // 获取管理员人数 和学员人数 给图表赋值
    // Promise.all(getAdminApi(), getStudentApi()).then(res => {
    //   console.log(res)
    // })


    console.log(this.zarr)
  },
  mounted () {
    // 生成柱状图
    this.zhu();
    // 绘制饼状图
    this.pie()
  },
  methods: {
    async zhu () {//生成柱状图的函数
      var arr = []
      var adminRes = await getAdminApi({ pageStart: 1 })
      var studentRes = await getStudentApi()
      arr[0] = adminRes.data.count;
      arr[1] = studentRes.data.count;
      //1.基于准备好的dom，初始化echarts实例
      console.log(this.$echarts)
      this.mychart1 = this.$echarts.init(this.$refs.mycharts1)

      // 2.饼状图的配置项
      let option = {
        xAxis: {
          type: 'category',
          data: ['管理员', '学员']
        },
        yAxis: {
          type: 'value'
        },
        series: [{//series y轴的设置
          data: arr,
          type: 'line'  //type bar 柱状图  line 折线图
        }]
      };
      // 3.把配置项设置给echart元素
      this.mychart1.setOption(option)
    },
    async pie () {//绘制饼图

      // var stundentRes = await getStudentApi();
      // var arr = stundentRes.data.list.map((item) => {
      //   return item.userName
      // });
      // console.log(arr)
      //1 初始eachrts的实例
      this.pieChart = this.$echarts.init(this.$refs.mycharts2)
      //2 准备饼状图的配置项
      var option = {
        title: {
          text: '同名数量统计',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {//标题的样式和数据
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: ["王博", "李浩"],  //名字的数据  [小王，小李]
          selected: { "王博": true }
        },
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: [{
              name: "王博",
              value: 1000
            },
            {
              name: "李浩",
              value: 2000
            }],  // 名字的个数 [200,100]
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 3 将配置项设置到实例
      this.pieChart.setOption(option)
    }
  },
};
</script>
<style lang="less">
.zhu,
.pie {
  margin-top: 30px;
  margin-left: 30px;
  float: left;
}
</style>
